<template>
  <div class="classify-comp">
    <div
      class="child-comp"
      v-for="item in camp_list[cid - 1].cs"
      v-bind:key="item.id"
    >
      <router-link :to="{ path: '/menu-search', query: { keyword: item.name } }">{{
        item.name
      }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      camp_list: [],
    };
  },
  props: {
    cid: {
      type: Number,
    },
  },
  methods: {},
  created() {
    let lists = JSON.parse(localStorage.getItem("fenlei_list"));
    // this.camp_list = lists;
    if(lists){
      this.camp_list = lists;
    }else{
       let _this = this;
        let url = `https://apis.netstart.cn/douguo/recipe/flatcatalogs`;
        let promise = axios.get(url);
        promise.then((res=>{
          // console.log(res.data.result.cs);
          _this.camp_list = res.data.result.cs;
        }))
          

    }

  },
  mounted() {},
};
</script>

<style lang="scss">
@import url("../assets/css/style.css");
.classify-comp {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .child-comp {
    text-align: center;
    border: 2px solid orange;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 2px 2px 2px yellowgreen;
    margin: 10px;
    font-size: 0;
    &:nth-of-type(1) {
      width: 100%;
    }
    a {
      font-size: 25px;
    }
  }
}
</style>